<template>
  <!--通知-->
  <div ref='message' class="inform" :style="{top: changewWidth,left: changewHeight}" v-if="isRouterAlive">
    <router-link :to="val">
      <img :src="echo" width="150px"/>
    </router-link>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        img: this.$refs.message,
        xPos: 0,
        yPos: 0,
        Hoffset: 0,
        Woffset: 0,
        yon: 0,
        xon: 0,
        width: 0,
        height: 0,
        scrollLeft: 0,
        scrollTop: 0,
        changewWidth: 0,
        changewHeight: 0,
        step: 1,

        delay: 40,
        interval: '',
        value: '',

        isRouterAlive: true,

        /*图*/
        val: '',
        echo: '',
      }
    },
    mounted() {
      this.get(this.$api.url + '/float/window/list');
      this.reload()
    },
    methods: {
      get(url) {
        this.$axios.get(url).then((res) => {
          if (res.data.code == 200) {
            this.id = res.data.data[0].id;
            this.val = res.data.data[0].uri;
            this.echo = res.data.data[0].imgUri;
          }
        });
      },

      changePos() {
        this.width = document.documentElement.clientWidth || document.body.clientWidth;
        this.height = document.documentElement.clientHeight || document.body.clientHeight;
        this.scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
        this.scrollTop = document.documentElement.scrollLeft || document.body.scrollTop;
        this.changewHeight = this.xPos + this.scrollLeft + 'px';
        this.changewWidth = this.yPos + this.scrollTop + 'px';

        if (this.yon) {
          this.yPos = this.yPos + this.step;
        } else {
          this.yPos = this.yPos - this.step;
        }
        if (this.yPos < 0) {
          this.yon = 1;
          this.yPos = 0;
        }
        if (this.yPos >= (this.height - this.Hoffset)) {
          this.yon = 0;
          this.yPos = (this.height - this.Hoffset);
        }
        if (this.xon) {
          this.xPos = this.xPos + this.step;
        } else {
          this.xPos = this.xPos - this.step;
        }
        if (this.xPos < 0) {
          this.xon = 1;
          this.xPos = 0;
        }
        if (this.xPos >= (this.width - 150 - this.Woffset)) {
          this.xon = 0;
          this.xPos = (this.width - 150 - this.Woffset);
        }
      },
      reload() {
        this.isRouterAlive = false;
        this.$nextTick(function () {
          this.isRouterAlive = true;
          this.interval = setInterval(this.changePos, this.delay);
        })
      }
    }
  }
</script>

<style scoped>
  div, a {
    color: #D71619;
  }

  a:hover {
    color: #0000cc;
  }

  .inform {
    z-index: 999;
    position: fixed;
    /*    background: url("../../assets/img/u100.jpg") no-repeat;*/
    background-size: 100% 100%;
    /*    padding: 15px 0;*/
    margin: 5px;
    width: 150px;
  }
</style>
